import React, { Component } from 'react';
import { TradingMarketC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Row, Col } from 'antd';

class TradingMarketCTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      t3: undefined,
    };

    setTimeout(() => {
      this.setState({
        t3: '105',
        loading: false,
      });
    }, 2000);
  }
  change = () => {
    this.state.TradingMarketC.setSelect('105');
  };
  render() {
    return (
      <div style={{ width: '800px' }}>
        <div>
          <h2>无初始化值</h2>
          <Form>
            <TradingMarketC form={this.props.form} dataIndex={'t1'} onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>同步加载初始化值</h2>
          <Form>
            <TradingMarketC form={this.props.form} dataType={2} dataIndex={'t2'} initialValue={'1'} marketType={['jys', 'yhj']} onChange={(e) => console.log(e)} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>异步加载初始化值</h2>
          <Form>
            <TradingMarketC form={this.props.form} dataIndex={'t3'} disabled={true} initialValue={this.state.t3} onChange={(e) => console.log(e)} loading={this.state.loading} />
          </Form>
        </div>
        <div className='sectionItem'>
          <h2>点击按钮模拟因业务触发地区的更改</h2>
          <Form>
            <TradingMarketC
              form={this.props.form}
              dataIndex={'t4'}
              onChange={(e) => console.log(e)}
              onRef={(ref) => {
                this.setState({ TradingMarketC: ref });
              }}
            />
          </Form>
          <Button onClick={this.change}>更改选项</Button>
        </div>
      </div>
    );
  }
}

export default Form.create()(TradingMarketCTest);
